<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form :model="params" :label-width="100">
                <row :gutter="16">
                    <Col span="24">
                        <FormItem label="部门选择">
                            <Select
                                v-model="params.department_id"
                                v-width="200"
                                :clearable="true"
                                @on-change="askDatas"
                                @on-clear="askDatas"
                            >
                                <Option
                                    v-for="item in select_department_list"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                >
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="归属人" required>
                            <CheckboxGroup
                                v-model="params.belong_member_id"
                                @on-change="askData"
                            >
                                <Checkbox
                                    :label="item.value"
                                    v-for="item in select_member_lists"
                                    :key="item.value"
                                    ><span
                                        >{{ item.label }}（{{
                                            item.total
                                        }}）</span
                                    ></Checkbox
                                >
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="创建日期">
                            <DatePicker :editable="false"
                                type="daterange"
                                placeholder="创建日期"
                                v-model="params.timeval"
                                @on-change="askData"
                            ></DatePicker>
                        </FormItem>
                    </Col>
                    <!-- <Col span="8">
                        <FormItem label="归属人">
                            <Select
                                v-model="params.belong_member_id"
                                multiple
                                :max-tag-count="3"
                                @on-change="askData"
                            >
                                <OptionGroup
                                    :label="item.label"
                                    v-for="item in member_list"
                                    :key="item.value"
                                >
                                    <Option
                                        v-for="its in item.children"
                                        :value="its.value"
                                        :key="its.value"
                                        >{{ its.label }}</Option
                                    >
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col> -->
                    <Col span="8">
                        <FormItem label="来源">
                            <TreeSelect
                                :max-tag-count="3"
                                v-model="params.channel_id"
                                :data="source_channel"
                                @on-change="askData"
                                multiple
                                transfer
                            />
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="病种">
                            <TreeSelect
                                v-model="params.patient_diseases_id"
                                multiple
                                :max-tag-count="3"
                                :data="diseases"
                                @on-change="askData"
                            />
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="最近回访人">
                            <Select
                                v-model="params.last_callback_id"
                                @on-change="askData"
                                :clearable="true"
                            >
                                <OptionGroup
                                    :label="item.label"
                                    v-for="item in member_list"
                                    :key="item.value"
                                >
                                    <Option
                                        v-for="its in item.children"
                                        :value="its.value"
                                        :key="its.value"
                                        >{{ its.label }}</Option
                                    >
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="患者状态">
                            <Select
                                v-model="params.patient_status_id"
                                :clearable="true"
                                @on-change="askData"
                            >
                                <Option
                                    v-for="item in status_list"
                                    :value="item.id"
                                    :key="item.id"
                                    >{{ item.status_name }}</Option
                                >
                            </Select>
                        </FormItem></Col
                    ><Col span="8">
                        <FormItem label="标签">
                            <Select
                                v-model="params.tags_ids"
                                multiple
                                :max-tag-count="3"
                                @on-change="askData"
                            >
                                <OptionGroup
                                    :label="item.label"
                                    v-for="item in tags_list"
                                    :key="item.value"
                                >
                                    <Option
                                        v-for="its in item.children"
                                        :value="its.value"
                                        :key="its.value"
                                        >{{ its.label }}</Option
                                    >
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col>
                </row>
                <row> </row>
                <Divider />
                <DescriptionList title="筛选结果" :col="3">
                    <Description term="筛选用户数：">{{ total }}</Description>
                    <Description term="分配给：">
                        <Row
                            type="flex"
                            justify="start"
                            align="middle"
                            :gutter="16"
                        >
                            <Col>
                                <Checkbox
                                    v-model="allot_type2"
                                    :disabled="allot_type2bool"
                                    @on-change="checkchange(2)"
                                    >公海</Checkbox
                                >
                            </Col>
                            <Col>
                                <Checkbox
                                    v-model="allot_type1"
                                    :disabled="allot_type1bool"
                                    @on-change="checkchange(1)"
                                    >鱼池</Checkbox
                                >
                            </Col>
                            <Col>
                                <Select
                                    v-model="allot_member_ids"
                                    :disabled="allot_type0bool"
                                    multiple
                                    @on-change="checkchange(0)"
                                    v-width="160"
                                    :max-tag-count="3"
                                >
                                    <OptionGroup
                                        :label="item.label"
                                        v-for="item in member_list"
                                        :key="item.value"
                                    >
                                        <Option
                                            v-for="its in item.children"
                                            :value="its.value"
                                            :key="its.value"
                                            >{{ its.label }}</Option
                                        >
                                    </OptionGroup>
                                </Select>
                            </Col>
                        </Row>
                    </Description>
                    <Description
                        ><Button
                            v-hasC="{
                                name: 'patient-index-allot',
                                flag: 'v1/patient/index/allot',
                            }"
                            type="primary"
                            :disabled="
                                total <= 0 ||
                                (!allot_type1bool &&
                                    !allot_type2bool &&
                                    !allot_type0bool)
                            "
                            @click="sunmit"
                            class="ivu-mr-8"
                            :loading="remarksloading"
                            >确定分配</Button
                        >
                        <Button
                            v-hasC="{
                                name: 'patient-index-allot',
                                flag: 'v1/patient/index/allot',
                            }"
                            @click="reset"
                            >重置</Button
                        >
                    </Description>
                </DescriptionList>
            </Form>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>

<script>
import {
    patientindexallotlist,
    patientindexallot,
} from "@/api/hqapi/indexone.js";
export default {
    name: "index",
    data() {
        return {
            allot_type: "",
            allot_type2: "",
            allot_type1: "",
            allot_type1bool: false,
            allot_type2bool: false,
            allot_type0bool: false,
            spinShow: false,
            total: 0,
            text2: "",
            text6: "",
            remarksloading: false,
            params: {
                department_id: "",
                timeval: ["", ""],
                belong_member_id: [],
                channel_id: [],
                patient_diseases_id: [],
                tags_ids: [],
                last_callback_id: "",
                patient_status_id: "",
                allot_type: 0,
                last_belong_member_id: ''
            },
            member_list: [],
            source_channel: [],
            tags_list: [],
            diseases: [],
            allot_ids: [],
            select_department_list: [],
            select_member_list: [],
            select_member_lists: [],
            status_list: [],
            allot_member_ids: [],
            spinShows: true,
        };
    },
    mounted() {
        this.initial();
    },
    methods: {
        initial() {
            this.askData();
        },
        checkchange(num) {
            if (num === 2) {
                if (this.allot_type2) {
                    this.params.allot_type = num
                    this.allot_type1bool = true;
                    this.allot_type2bool = false;
                    this.allot_type0bool = true;
                } else {
                    this.params.allot_type = 0
                    this.allot_type1bool = false;
                    this.allot_type2bool = false;
                    this.allot_type0bool = false;
                }
                this.askData()
            } else if (num === 1) {
                if (this.allot_type1) {
                    this.params.allot_type = num
                    this.allot_type1bool = false;
                    this.allot_type2bool = true;
                    this.allot_type0bool = true;
                } else {
                    this.params.allot_type = 0
                    this.allot_type1bool = false;
                    this.allot_type2bool = false;
                    this.allot_type0bool = false;
                }
                this.askData()
            } else if (num === 0) {
                if (this.allot_member_ids.length > 0) {
                    this.params.allot_type = num
                    this.allot_type1bool = true;
                    this.allot_type2bool = true;
                    this.allot_type0bool = false;
                } else {
                    this.params.allot_type = 0
                    this.allot_type1bool = false;
                    this.allot_type2bool = false;
                    this.allot_type0bool = false;
                }
            }
        },
        askData() {
            // if (this.spinShows) {
            this.spinShow = true;
            this.spinShows = false;
            // }
            let config = {
                created_stime: this.params.timeval[0],
                created_etime: this.params.timeval[1],
                belong_member_id: this.params.belong_member_id.join(","),
                channel_id: this.params.channel_id.join(","),
                patient_diseases_id: this.params.patient_diseases_id.join(","),
                tags_ids: this.params.tags_ids.join(","),
                last_callback_id: this.params.last_callback_id,
                patient_status_id: this.params.patient_status_id,
                department_id: this.params.department_id,
                allot_type: this.params.allot_type
            };
            patientindexallotlist(config).then((res) => {
                // if (this.member_list.length === 0) {
                this.member_list = res.condition.member_list;
                // }
                if (this.source_channel.length === 0) {
                    this.source_channel = res.condition.source_channel;
                }
                // if (this.tags_list.length === 0) {
                this.tags_list = res.condition.tags_list;
                // }
                if (this.diseases.length === 0) {
                    this.diseases = res.condition.diseases;
                }
                // if (this.select_department_list.length === 0) {
                this.select_department_list =
                    res.condition.select_department_list;
                // }
                // if (this.status_list.length === 0) {
                this.status_list = res.condition.status_list;
                // }
                // if (this.select_member_list.length === 0) {
                this.select_member_list = JSON.parse(
                    JSON.stringify(res.condition.select_member_list)
                );
                this.select_member_lists = JSON.parse(
                    JSON.stringify(res.condition.select_member_list)
                );
                // }
                if (!this.params.department_id) {
                    this.select_member_lists = JSON.parse(
                        JSON.stringify(this.select_member_list)
                    );
                } else {
                    this.select_member_lists = [];
                    for (let item of this.select_member_list) {
                        if (+item.value === 0) {
                            this.select_member_lists.unshift(item);
                        } else if (item.department_id === this.params.department_id) {
                            this.select_member_lists.push(item);
                        }
                    }
                }
                this.allot_ids = res.list;
                this.total = res.total;
                this.spinShow = false;
            });
        },
        sunmit() {
            this.remarksloading = true;
            let text2 = [];
            for (let item of this.select_member_lists) {
                for (let its of this.params.belong_member_id) {
                    if (item.value === its) {
                        text2.push(item.label);
                    }
                }
            }
            this.text2 = text2.join("、");
            if (this.allot_type2bool && this.allot_type1bool) {
                let text6 = [];
                this.allot_type = 0;
                for (let item of this.member_list) {
                    for (let its of item.children) {
                        for (let itit of this.allot_member_ids) {
                            if (its.value === itit) {
                                text6.push(its.label);
                            }
                        }
                    }
                }
                this.text6 = text6.join("、");
            } else if (this.allot_type2bool && this.allot_type0bool) {
                this.allot_type = 1;
                this.text6 = "鱼池";
            } else if (this.allot_type1bool && this.allot_type0bool) {
                this.allot_type = 2;
                this.text6 = "公海";
            }
            this.params.allot_type = this.allot_type
            let config = {
                created_stime: this.params.timeval[0],
                created_etime: this.params.timeval[1],
                belong_member_id: this.params.belong_member_id.join(","),
                channel_id: this.params.channel_id.join(","),
                patient_diseases_id: this.params.patient_diseases_id.join(","),
                tags_ids: this.params.tags_ids.join(","),
                last_callback_id: this.params.last_callback_id,
                allot_member_ids: this.allot_member_ids.join(","),
                patient_status_id: this.params.patient_status_id,
                allot_type: this.allot_type,
                department_id: this.params.department_id
            };
            this.$Modal.confirm({
                title: "分配确认",
                content: `<p>是否确认将<strong>${this.text2}</strong>${
                    this.text2 ? "的" : ""
                }<strong>${this.total}</strong>个患者分配给<strong>${
                    this.text6
                }</strong></p>`,
                onOk: () => {
                    patientindexallot(config)
                        .then(() => {
                            this.$Message.success("分配成功!");
                            this.params.department_id = "";
                            (this.text2 = ""),
                                (this.text6 = ""),
                                (this.params = {
                                    timeval: ["", ""],
                                    belong_member_id: [],
                                    channel_id: [],
                                    patient_diseases_id: [],
                                    tags_ids: [],
                                    last_callback_id: "",
                                    patient_status_id: "",
                                });
                            this.allot_member_ids = [];
                            this.allot_type = "";
                            this.allot_type2 = false;
                            this.allot_type1 = false;
                            this.allot_type1bool = false;
                            this.allot_type2bool = false;
                            this.allot_type0bool = false;
                            this.askData();

                            this.remarksloading = false;
                        })
                        .catch(() => {
                            this.remarksloading = false;
                        });
                },
                onCancel: () => {
                    this.remarksloading = false;
                },
            });
        },
        reset() {
            this.params.department_id = "";
            this.text2 = "";
            this.text6 = "";
            this.params = {
                timeval: ["", ""],
                belong_member_id: [],
                channel_id: [],
                patient_diseases_id: [],
                tags_ids: [],
                last_callback_id: "",
                patient_status_id: "",
            };
            this.allot_member_ids = [];
            this.allot_type = "";
            this.allot_type2 = false;
            this.allot_type1 = false;
            this.allot_type1bool = false;
            this.allot_type2bool = false;
            this.allot_type0bool = false;
        },
        askDatas() {
            this.spinShows = true;
            this.params.belong_member_id = [];
            this.select_member_lists = [];
            if (!this.params.department_id) {
                this.select_member_lists = JSON.parse(
                    JSON.stringify(this.select_member_list)
                );
            } else {
                this.select_member_lists = [];
                for (let item of this.select_member_list) {
                    if (+item.value === 0) {
                        this.select_member_lists.unshift(item);
                    } else if (item.department_id === this.params.department_id) {
                        this.select_member_lists.push(item);
                    }
                }
            }
            this.askData();
        },
    },
};
</script>

<style scoped>
.v-pd-40 {
    padding-bottom: 40px;
    padding-top: 2px;
}
</style>
